<template>
  <div>
    <van-nav-bar
      title="标题"
      left-text="返回"
      right-text="按钮"
      left-arrow
      @click-left="onClickLeft"
      @click-right="onClickRight"
    />
    <van-notice-bar
      left-icon="volume-o"
      text="在代码阅读过程中人们说脏话的频率是衡量代码质量的唯一标准。"
    />
    <van-search
      v-model="searchtext"
      shape="round"
      background="#4fc08d"
      placeholder="请输入搜索关键词"
    />
    <van-pull-refresh v-model="state4.loading" @refresh="onRefresh4">
      <p>刷新次数: {{ state4.count }}</p>
    </van-pull-refresh>
    <van-tabs v-model="active1">
      <van-tab title="标签 1">
        12
        <refa />
        <van-steps :active="activeq">
          <van-step>买家下单</van-step>
          <van-step>商家接单</van-step>
          <van-step>买家提货</van-step>
          <van-step>交易完成</van-step>
        </van-steps>
        <van-popover v-model:show="showPopover" @select="onSelect2">
          <template #reference>
            <van-button type="primary">浅色风格</van-button>
          </template>
        </van-popover>
        <van-swipe-cell>
          <van-card
            num="2"
            price="2.00"
            desc="描述信息"
            title="商品标题"
            class="goods-card"
            thumb="https://img.yzcdn.cn/vant/cat.jpeg"
          />
          <template #right>
            <van-button
              square
              text="删除"
              type="danger"
              class="delete-button"
            />
          </template>
        </van-swipe-cell>
        <!-- <van-cell title="选择日期区间" :value="date5" @click="show = true" /> -->
        <!-- <van-calendar v-model:show="show5" type="range" @confirm="onConfirm" /> -->
        <van-share-sheet
          v-model:show="showShare3"
          title="立即分享给好友"
          :options="options3"
        />
        <van-action-bar>
          <van-action-bar-icon icon="chat-o" text="客服" />
          <van-action-bar-icon icon="shop-o" text="店铺" />
          <van-action-bar-button
            color="#be99ff"
            type="warning"
            text="加入购物车"
          />
          <van-action-bar-button
            color="#7232dd"
            type="danger"
            text="立即购买"
          />
        </van-action-bar>
        <!-- <van-index-bar :index-list="list">
          <van-index-anchor index="A" />
          <van-cell title="文本" />
          <van-cell title="文本" />
          <van-cell title="文本" />

          <van-index-anchor index="B" />
          <van-cell title="文本" />
          <van-cell title="文本" />
          <van-cell title="文本" />
        </van-index-bar>-->
      </van-tab>
      <van-tab title="标签 2">
        <van-card
          num="2"
          price="2.00"
          desc="描述信息"
          title="商品标题"
          thumb="https://img.yzcdn.cn/vant/ipad.jpeg"
        >
          <template #tags>
            <van-tag plain type="danger">标签</van-tag>
            <van-tag plain type="danger">标签</van-tag>
          </template>
          <template #footer>
            <van-button size="mini">按钮</van-button>
            <van-button size="mini">按钮</van-button>
          </template>
        </van-card>
        <van-grid>
          <van-grid-item icon="photo-o" text="文字" />
          <van-grid-item icon="photo-o" text="文字" />
          <van-grid-item icon="photo-o" text="文字" />
          <van-grid-item icon="photo-o" text="文字" />
        </van-grid>
        <van-area
          title="标题"
          :area-list="areaList"
          :columns-placeholder="['请选择', '请选择', '请选择']"
        />
        <van-submit-bar :price="3050" button-text="提交订单" @submit="onSubmit">
          <van-checkbox v-model="checked">全选</van-checkbox>
          <template #tip>
            你的收货地址不支持同城送,
            <span @click="onClickLink">修改地址</span>
          </template>
        </van-submit-bar>
      </van-tab>
      <van-tab title="标签 3">
        <van-contact-edit
          is-edit
          show-set-default
          :contact-info="editingContact"
          set-default-label="设为默认联系人"
          @save="onSave"
          @delete="onDelete"
        />
        <van-action-bar-icon icon="chat-o" text="客服" @click="onClickIcon" />
        <van-action-bar-icon icon="cart-o" text="购物车" @click="onClickIcon" />
        <van-action-bar-icon icon="shop-o" text="店铺" @click="onClickIcon" />
        <van-action-bar-button
          type="danger"
          text="立即购买"
          @click="onClickButton"
        />
      </van-tab>
      <van-tab title="标签 4">
        <van-icon name="chat-o" />
        <van-contact-list
          v-model="state1.chosenContactId"
          :list="state1.list"
          default-tag-text="默认"
          @add="onAdd"
          @edit="onEdit"
          @select="onSelect"
        />
        <!-- 优惠券单元格 -->
        <van-coupon-cell
          :coupons="state.coupons"
          :chosen-coupon="state.chosenCoupon"
          @click="state.showList = true"
        />
        <!-- 优惠券列表 -->
        <van-popup
          v-model="state.showList"
          round
          position="bottom"
          style="height: 90%; padding-top: 4px"
        >
          <van-coupon-list
            :coupons="state.coupons"
            :chosen-coupon="state.chosenCoupon"
            @change="onChange"
            @exchange="onExchange"
          />
        </van-popup>
        <van-address-edit
          :area-list="areaList"
          show-postal
          show-delete
          show-set-default
          show-search-result
          :search-result="searchResult1"
          :area-columns-placeholder="['请选择', '请选择', '请选择']"
          @save="onSave1"
          @delete="onDelete1"
        />
      </van-tab>
    </van-tabs>
    <!-- {{ qinput1 }} -->
    <!-- <qinput v-model:title="qinput1"></qinput> -->

    <addre ref="area" :title="'123'">
      <template v-slot:default>
        <div>asd</div>
      </template>
      <template v-slot:header>
        <span>1sad投</span>
      </template>
    </addre>
    <van-tabbar v-model="active">
      <van-tabbar-item icon="setting-o">
        <router-link to="/vant1">标签</router-link>
      </van-tabbar-item>
      <van-tabbar-item icon="home-o">标签</van-tabbar-item>
      <van-tabbar-item icon="search">标签</van-tabbar-item>
      <van-tabbar-item icon="friends-o">标签</van-tabbar-item>
    </van-tabbar>
  </div>
</template>

<script lang="ts">
import { onMounted, ref, reactive, toRefs } from "vue";
import addre from "./App.vue";
import qinput from "./input.vue";
import {
  Toast,
  CouponCell,
  CouponList,
  ActionBar,
  ActionBarIcon,
  ActionBarButton,
} from "vant";
import refa from "./refa.vue";
import { areaList } from "@vant/area-data";
let name: string = "121";
export default {
  components: {
    addre,
    qinput,
    refa,
  },
  setup() {
    type Text = {
      text: string;
    };

    const actions2: Text[] = [
      { text: "选项一" },
      { text: "选项二" },
      { text: "选项三" },
    ];
    const onSelect2 = (action: any) => Toast(action.text);
    const showPopover = ref<boolean>(false);
    type State1 = {
      chosenContactId: string;
      list: Array<{
        id: string;
        name: string;
        tel: string;
        isDefault?: boolean;
      }>;
      [things: string]: any;
    };
    const state1 = reactive<State1>({
      chosenContactId: "1",
      qinput1: "123",
      list: [
        {
          id: "1",
          name: "张三",
          tel: "13000000000",
          isDefault: true,
        },
        {
          id: "2",
          name: "李四",
          tel: "1310000000",
        },
      ],
    });
    const searchResult1: any = ref<any>([]);
    const date5 = ref("");
    const show5 = ref(false);
    const activeq = ref(0);
    const formatDate = (date: any) =>
      `${date.getMonth() + 1}/${date.getDate()}`;

    const onSave1 = () => Toast("save");
    const onDelete1 = () => Toast("delete");

    const state4 = reactive({
      count: 0,
      loading: false,
    });
    const onRefresh4 = () => {
      setTimeout(() => {
        Toast("刷新成功");
        state4.loading = false;
        state4.count++;
      }, 1000);
    };
    const showShare3 = ref(true);
    const options3 = [
      [
        { name: "微信", icon: "wechat" },
        { name: "朋友圈", icon: "wechat-moments" },
        { name: "微博", icon: "weibo" },
        { name: "QQ", icon: "qq" },
      ],
      [
        { name: "复制链接", icon: "link" },
        { name: "分享海报", icon: "poster" },
        { name: "二维码", icon: "qrcode" },
        { name: "小程序码", icon: "weapp-qrcode" },
      ],
    ];
    const editingContact = ref({});
    type List = {
      name?: string;
    };
    const child: Array<List> = [];
    const onSave = (contactInfo: any) => Toast("保存");
    const onDelete = (contactInfo: any) => Toast("删除");
    const onAdd = () => Toast("新增");
    const onEdit = (contact: any) => Toast("编辑" + contact.id);
    const onSelect = (contact: any) => Toast("选择" + contact.id);
    const active = ref(0);
    const active1 = ref(2);
    const checked = ref(false);
    const onSubmit = () => Toast("点击按钮");
    const onClickLink = () => Toast("修改地址");
    const searchtext = ref("");
    const coupon = {
      available: 1,
      condition: "无使用门槛\n最多优惠12元",
      reason: "",
      value: 150,
      name: "优惠券名称",
      startAt: 1489104000,
      endAt: 1514592000,
      valueDesc: "1.5",
      unitDesc: "元",
    };
    const state = reactive({
      coupons: [coupon],
      showList: false,
      chosenCoupon: -1,
    });
    const onChange = (index: any) => {
      state.showList = false;
      state.chosenCoupon = index;
    };
    const onExchange = (code: any) => {
      state.coupons.push(coupon);
    };
    const list = reactive([1, 2, 3, 4, 5, 6, 7, 8, 9, 10]);
    const onClickLeft = () => Toast("返回");
    const onClickRight = () => Toast("按钮");
    const onClickIcon = () => Toast("点击图标");
    const onClickButton = () => Toast("点击按钮");

    const white = ref("white");
    const area: any = ref(null);
    onMounted(() => {
      console.log(area.value, "area", name);
      setTimeout(() => {
        area.value.hello = "已经改变";
        console.log(area.value, "area");
      }, 1000);
      // window.onresize = function () {
      //   var w = document.documentElement.clientWidth;
      //   var fz = w / (500 / 20);
      //   document.documentElement.style.fontSize = fz + "px";
      // };
    });
    return {
      onSelect2,
      area,
      state,
      showPopover,
      state1,
      searchResult1,
      state4,
      date5,
      areaList,
      actions2,
      show5,
      activeq,
      formatDate,
      onSave1,
      onDelete1,
      onRefresh4,
      showShare3,
      options3,
      editingContact,
      child,
      onSave,
      onDelete,
      onAdd,
      onEdit,
      onSelect,
      active,
      active1,
      searchtext,
      checked,
      onSubmit,
      onClickLink,
      onChange,
      onExchange,
      onClickLeft,
      onClickRight,
      onClickIcon,
      onClickButton,
      list,
      white,
    };
  },
};
</script>

<style lang="scss">
$white: v-bind(white);
.goods-card {
  margin: 0;
  background-color: $white;
}
.van-button {
  width: 150px;
  height: 100px;
}
.delete-button {
  height: 100%;
}
</style>
